<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table border="1px">
        <caption>个人简介</caption>
        <tr><td>照片:</td> <td id = "pic_td"></td></tr>
        <tr><td>姓名:</td> <td id = "name_td"></td></tr>
        <tr><td>年龄:</td> <td id = "age_td"></td></tr>
        <tr><td>好友:</td> <td id = "friends_td"></td></tr>
    </table>

</body>
<script>
    let person = {
        name: '传奇哥',
        age: 18,
        friends: ['路飞','索隆','娜美','张飞'],
        imgUrl: 'img/1.jpg'
    };

    let table = document.querySelector('table');
    let pic_id = document.getElementById('pic_td');
    let name_id = document.getElementById('name_td');
    let age_id = document.getElementById('age_td');
    let friends_id = document.getElementById('friends_td');

    var imgE = document.createElement('img');
    imgE.src = person.imgUrl;
    imgE.width = 200;
    pic_id.append(imgE);

    // pic_id.innerHTML = '<img src="' + person.imgUrl + '" alt="传奇哥">';
    name_id.innerHTML = person.name;
    age_id.innerHTML = person.age;

    var ul = document.createElement('ul');
    for (let i = 0; i < person.friends.length; i++) {
        var li = document.createElement('li');
        li.innerHTML = person.friends[i];
        ul.append(li);
    }
    friends_id.append(ul)
    // friends_id.innerHTML = person.friends;

</script>
</html>